<template>
  <div>
    <!-- v-for 使用方法是 会返回两个参数，第一个是当前项，第二个是数组的下标，在dom中，直接使用当前项或者下标即可 -->
    <!-- v-for 数组的情况 -->
    <div
      class="item"
      v-for="(item, index) in menu"
      @click="() => handleClick(item)"
      :key="item"
    >
      {{ item }}{{ index }}
    </div>
    <button @click="changeMenu">加菜</button>
    <div>遍历对象</div>
    <!-- 遍历对象的时候，第一个值是当前属性的value，第二个值是当前属性的key -->
    <div class="item2" v-for="(value, key) in menu1" :key="key">
      {{ value }}{{ key }}
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const menu = ref(["宫保鸡丁", "辣子鸡丁"]);
const changeMenu = () => {
  menu.value.push("番茄鸡蛋");
};
const handleClick = (item) => {
  console.log(item);
};

const menu1 = ref({ name: "辣子鸡丁", price: 20 });
</script>
<style></style>
